<template>
    <app-wrap class="browse-records" loading>
        <div class="top" v-if="info">
            <div class="user-info">
                <img :src="info.head" alt="" class="avatar">
                <text>{{info.name}}</text>
            </div>
        </div>
        <div class="interested-products">
            <browse-product @share="handleProductShare" v-for="(product,index) in productList"
                            :key="index" :product="product"></browse-product>
        </div>
        <painter style="opacity: 0; position: absolute; left: -10000vw; top: -10000vh;" v-if="paletteData.views.length"
                 :palette="paletteData" @imgOK="onImgOK" @imgErr="onImgErr"></painter>

    </app-wrap>
</template>

<config>
    {
    "navigationBarTitleText": "他可能感兴趣",
    "usingComponents":{
    "painter":"/native/components/painter/painter"
    }
    }
</config>

<script>
  import appWrap from '../components/app-wrap'
  import browseProduct from '../components/browse-product'

  import {mapGetters} from "vuex";
  import {getProduct, getRecommendProduct} from "@/api";
  import {API_BASE_URL} from "../config";

  export default {
    name: "interested-products",
    components: {
      appWrap, browseProduct
    },
    data() {
      return {
        info: null,
        txtViews: [
          {
            type: 'text',
            text: "想知道更多",
            css: {
              left: '30rpx',
              top: '720rpx',
              color: '#333333',
              fontSize: '36rpx',
            },
          },
          {
            type: 'text',
            text: "扫一扫，来我的微店了解详情",
            css: {
              left: '30rpx',
              top: '820rpx',
              color: '#888888',
              fontSize: '30rpx',
            },
          }
        ],
        paletteData: {
          background: '#ffffff',
          width: '710rpx',
          height: '900rpx',
          views: []
        },
        shareData: {
          title: '',
          path: '',
          imageUrl: ''
        },
        productList: [],
        posterPaths: {},
        currentPainterItem: null,
        itemNumber: [],
        defaultItemNumbers:['20495','20505','40371','30729','2540','38120','20504','20736','38102','40434']
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    methods: {
      // 处理产品分享按钮点击
      handleProductShare({itemNumber, imageUrl}) {
        this.currentPainterItem = itemNumber;
        if (this.posterPaths[itemNumber]) {
          return this.onImgOK({detail: {path: this.posterPaths[itemNumber]}});
        }
        ;
        this.$appWrap.showLoading();
        this.paletteData.views = this.getViews(imageUrl, API_BASE_URL + `/product/qrcode?ada=${this.userInfo.ada}&itemNumber=${itemNumber}&width=80`)
      },
      // 获取渲染子节点
      getViews(imageUrl, imageUrl2) {
        return [...this.txtViews, {
          type: 'image',
          url: imageUrl,
          css: {
            width: '640rpx',
            height: '640rpx',
            left: '35rpx',
            top: '35rpx'
          }
        }, {
          type: 'image',
          url: imageUrl2,
          css: {
            width: '200rpx',
            height: '200rpx',
            left: '505rpx',
            top: '695rpx'
          }
        }]
      },
      // 获取产品列表
      getProductList() {
        // 获取感兴趣列表
        this.$appWrap.showLoading();
        getRecommendProduct(this.info.unionId)
          .then((data) => {
            if (Array.isArray(data.data) && data.data.length) {
              this.itemNumber = data.data.map(item => item.itemNumber);
              getProduct(this.itemNumber.join(','))
                .then(data => {
                  this.productList = data.data;
                  this.$appWrap.hideLoading();
                });
            } else {
              this.itemNumber = this.defaultItemNumbers;
              getProduct(this.itemNumber.join(','))
                .then(data => {
                  this.productList = data.data;
                  this.$appWrap.hideLoading();
                });
            }
          })
          .catch(e => {
            this.$appWrap.hideLoading();
          })
      },
      // 渲染图片成功后处理
      onImgOK({detail}) {
        const current = detail.path;
        this.posterPaths[this.currentPainterItem] = current;
        this.$appWrap.hideLoading();
        Megalo.previewImage({
          current,
          urls: [current]
        });
      },
      onImgErr({detail}){
        console.log(detail)
        this.$appWrap.hideLoading();

        this.$notify('请稍后再试');
      }
    },
    onShareAppMessage({from}) {
      if (from !== 'button') {
        return null;
      }
      return this.shareData
    },
    mounted() {
      this.info = {
        ...this.$mp.query,
        name: decodeURIComponent(this.$mp.query.name),
        head: decodeURIComponent(this.$mp.query.head),
      };
      console.log(this.info)
      this.getProductList();
    }
  }
</script>

<style scoped lang="less">
    .top {
        padding: 24px 36px;
        border-bottom: 1px solid rgba(226, 226, 226, 1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #F8F8F9;

        .user-info {
            display: inline-flex;
            line-height: 54px;

            .avatar {
                width: 54px;
                height: 54px;
                border-radius: 50%;
                margin-right: 14px;
            }

            text {
                font-size: 30px;
                font-weight: bold;
                color: #000;
            }
        }
    }

    .interested-products {
        padding-left: 36px;
    }
</style>
